<template>
	<view>
		<view v-for="(calendar, index) in calendarList" :key="index">
			<uni-section class="mb-10" :title="calendar.content" :titleColor="titileColorStyle(calendar.state)"
				:sub-title="calendar.place" :subTitleColor="subTitileColorStyle(calendar.state)"
				@click="emitCalendarDetail(calendar.calendarId,calendar.state)">
				<template v-slot:decoration>
					<view :style="{backgroundColor: blockColors[index]}" class="block">
					</view>
				</template>
				<template v-slot:right>
					<view style="display: flex; align-items: center;">
						<view style="display: flex; flex-direction: column; align-items: flex-end; margin-right: 8px;">
							<view
								:style="{ fontSize: '12px', color: calendar.state === '1' ? '#c0c0c0' : '#000', padding: '3px' }">
								{{ formatDate(calendar.startTime) }}
							</view>
							<uni-rate v-model="calendar.priority" :max="calendar.priority" :size="15"
								:activeColor="calendar.state === '1' ? '#c0c0c0' : '#ffca3e'" :readonly="true" />
						</view>
						<uni-icons :type="calendar.state === '1' ? 'checkbox-filled' : 'circle'" size="30"
							:color="calendar.state === '1' ? '#c0c0c0' : '#2979ff'" @click.native.stop="emitFinishTask(calendar)">
						</uni-icons>
					</view>
				</template>
			</uni-section>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			calendarList: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				blockColors: []
			}
		},
		computed: {
			// 主标题颜色
			titileColorStyle: function() {
				return function(calendarState) {
					switch (calendarState) {
						case '1':
							return '#c0c0c0';
						default :
							return '#000000';
					}
				}
			},
			// 副标题颜色
			subTitileColorStyle: function() {
				return function(calendarState) {
					switch (calendarState) {
						case '1':
							return '#c0c0c0';
						default :
							return '#000000';
					}
				}
			},
		},
		mounted() {
			this.blockColorStyle();
		},
		watch: {
		  // 监听 calendarList 的变化, 刷新样式
		  calendarList(newList) {
		    this.blockColorStyle();
		  }
		},
		methods: {
			// 完成日程
			emitFinishTask(calendar) {
				// 通过 emit 向父组件发送事件
				this.$emit('finish-task', calendar);
			},
			// 查看详情
			emitCalendarDetail(calendarId, calendarState) {
				this.$emit('calendar-detail', calendarId, calendarState);
			},
			// 修改装饰线颜色
			blockColorStyle() {
				this.blockColors = this.calendarList.map(calendar => {
					if (calendar.state === '1') return '#c0c0c0';
					switch (calendar.priority) {
						case '1':
							return '#2979ff';
						case '2':
							return '#ffca3e';
						case '3':
							return '#ff0000';
						default:
							return '#c0c0c0';
					}
				});
			},
			// 格式化日期
			formatDate(date) {
				const d = new Date(date); // 将日期转换为 Date 对象
				const year = d.getFullYear().toString().slice(2); // 获取年份的后两位
				const month = String(d.getMonth() + 1).padStart(2, '0'); // 获取月份，确保是两位数
				const day = String(d.getDate()).padStart(2, '0'); // 获取日期，确保是两位数
				const hours = String(d.getHours()).padStart(2, '0'); // 获取小时
				const minutes = String(d.getMinutes()).padStart(2, '0'); // 获取分钟
				const seconds = String(d.getSeconds()).padStart(2, '0'); // 获取秒钟
				// 拼接成 yy/MM/dd HH:mm:ss 格式
				return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
			},
		}
	}
</script>

<style>
	/* 装饰线样式 */
	.block {
		width: 6px;
		height: 6px;
		margin-right: 4px;
		border-radius: 50%;
	}
</style>